<template>
    <div class="box">
        <div class="form-box">
            <h1>欢迎加入我们！</h1>
            <div class="form-us">
                <form  action="" method="get" class="form">
                    <div style="margin-bottom: 20px">
                        <el-input v-model="storeName" placeholder="请输入商家名"></el-input>
                    </div>
                    <div style="margin-bottom: 20px">
                        <el-input type="text" v-model="number" @input="isPhone()" maxlength="11" autofocus placeholder="请输入电话号码">
                            <template class="gd" slot="prepend">+86</template>
                        </el-input>
                        <div class="errorColor" v-if="isShow"><i class="el-icon-warning"></i> 电话号码输入有误，请重新输入</div>
                    </div>
                    <!--<div class="yzm">
                        <input  type="text"  id="" placeholder="请输入验证码">
                        <div class="gcode">
                            HHHHH
                        </div>
                        &lt;!&ndash;<input type="button" @click="changeMsg" v-model="message" :disabled="disabled" >&ndash;&gt;
                    </div>-->
                    <div style="margin-bottom: 20px">
                        <el-select style="width: 350px;" v-model="kinds" placeholder="请选择商家类型">
                            <el-option label="美食" value="food"></el-option>
                            <el-option label="药店" value="medicine"></el-option>
                            <el-option label="超市" value="supermarket"></el-option>
                        </el-select>
                    </div>
                </form>
                <div style="float: left">
                    <input type="radio">我已阅读并同意<a href="##" style="text-decoration: none"> 《隐私条款》</a>
                </div>
                <div>
                    <input type="submit" id="cbt" value="提交" @click="goback()">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                storeName:'',
                kinds:'',
                number:'',
                /*message:'发送验证码',*/
               /* disabled: true,*/
                /*time: 60,*/
                isShow: false,
            }
        },
        methods:{
            isPhone(){
                var reg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/
                if(this.number.length ==11){
                    if(!reg.test(this.number)){
                        this.isShow = true;
                    }else {
                        this.disabled = false;
                        console.log('电话号码输入正确！');
                    }
                }else {
                    this.disabled = true;
                    this.isShow = false;
                }
            },
            goback(){
                if(this.number!=''&&this.storeName!=''&&this.kinds!=''){
                    this.$message({
                        message: '提交成功！',
                        type: 'success'
                    });
                    this.$router.go(-1)
                }

            }
            /*changeMsg(){
                this.disabled = true;
                this.message = this.time + 's后重新获取';
                var timer = setInterval(()=>{
                    this.time--;
                    this.time = this.time>=0?this.time:0;
                    this.message = this.time + 's后重新获取';
                    if(this.time == 0){
                        this.message = '重新获取';
                        this.disabled = false;
                        clearInterval(timer);
                        this.time = 60;
                    }
                },1000)
            }*/
        }
    }
</script>

<style scoped>
    .form-box{
       /* border: 1px solid black;*/
        width: 600px;
        height: 600px;
        margin: 50px auto;
    }
    .box{
        background: url("../../assets/images/logo.png") no-repeat ;
        background-size: 1200px 620px ;
        background-position-x: 300px;
        background-position-y: 95px;
    }
    h1 {
        margin: 100px 0 0 -300px;
    }
    .form-us{
        width: 350px;
        height: 300px;
        margin: 40px auto;
    }
    input {
        outline: none;
        margin-top: 20px;
        margin-right: 20px;
    }
    input::placeholder {
        text-indent: 10px;
    }
    .yzm{
        display: flex;
        height: 80px;
    }

   /* input[type=text] {
        flex: 65%;
        height: 34px;
        text-indent: 10px;
        border-radius: 3px;
        border:1px solid #dcdfe6;
        color: #dcdfe6;
    }*/
    input[type=text]:focus{
        border-color:#409eff ;
    }
    input[type=text]::-webkit-input-placeholder{
        color: #c0c4cc;
    }
    input[type=button] {
        width:100px;
        height: 34px;
        border: none;
        background: #056da1;
        color: white;
    }
   /* .gcode{
        height: 33px ;
        width: 100px;
        flex: 35%;
        line-height: 33px;
        !*border: 1px solid black;*!
        margin-top: 20px;
        background: url("../../assets/images/dcode.png") no-repeat;
        letter-spacing: 10px;
        font-style: italic;
        cursor: pointer;

    }*/
    input[type=submit]{
       /* border: 1px solid black;*/
        flex:10%;
        width: 100%;
        height: 34px;
        margin: 20px auto 0;
        background: #056da1;
        color: white;
        border: none;
    }

    .errorColor {
        color: red;
        margin-top: 10px;
        font-size: 12px;
    }
</style>
